<template>
  <div class="main">
    <!-- 导航栏 -->
    <mt-header fixed title="宠物领养" style="background: #f49b00">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>
    <div style="height: 40px"></div>

    <!-- 搜索框 -->
    <div class="search">
      <input
        @keyup.enter="goto"
        v-model="msg"
        id="input"
        background="#fcfcfc"
        type="text"
        placeholder="请输入您要搜索的内容"
      />
      <van-icon @click="goto" name="search" size="30px" />
    </div>

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        ><img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.ibaotu.com%2F19%2F70%2F93%2F02a888piCmuX.jpg%21w280&refer=http%3A%2F%2Fpic.ibaotu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668413499&t=60929c9199a943b1946f2dcc147e4202"
          style="height: 54vw; width: 100%"
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw1280h802%2F20180114%2Fdb79-fyqrewi0559148.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668416829&t=30ce01597899f6377300c414a53e6c8d"
          style="height: 54vw; width: 100%"
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170308%2F6f61de9ec9214cb18713d40da27db807_th.jpg&refer=http%3A%2F%2Fimg.mp.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668416947&t=d1bed59e33d3428cf143ae08b2af37dd"
          style="height: 54vw; width: 100%"
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180912%2F8dc4dc1c613047ab9b11f35173b379ed.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668417190&t=e36687a5d1c0b68889923848dda792b0"
          style="height: 54vw; width: 100%"
      /></van-swipe-item>
    </van-swipe>

    <div class="list">
      <h4>萌宠列表</h4>
    </div>

    <!-- 分割线 -->
    <van-divider :style="{ borderColor: '#aaa', padding: '0 10px' }" />

    <!-- 宠物卡片 -->
    <div class="card">
      <div v-for="item in adpet" :key="item.apid" @click="details(item.apid)">
        <img :src="`${item.pic}`" />
        <div>
          <h3>{{ item.petName }}</h3>
          <p>{{ item.type }}</p>
          <van-tag
            plain
            type="primary"
            size="large"
            color="#f49b00"
            style="margin: 0 4px 0"
            >性别:{{ item.sex }}</van-tag
          >
          <van-tag plain type="primary" size="large"
            >性格:{{ item.character }}</van-tag
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      msg: "", // 搜索框信息
      adpet: [], // 保存领养宠物列表
    };
  },

  mounted() {
    // 发送请求，加载宠物列表
    this.axios.get("/adopt").then((res) => {
      console.log(res);
      this.adpet = res.data.data;
    });
  },
  methods: {
    // 点击卡片跳转到详情页方法
    details(id) {
      this.$router.push(`/adopt/details?apid=${id}`);
    },
    // 搜索方法
    goto() {
      const path = `/adopt/search?msg=${this.msg}`;
      // 如果当前路径和要跳转的路径相同则终止
      if (this.$route.path == path) return;
      this.$router.push(path);
      this.msg = ""; // 清空输入框的内容
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  // background-color: #f6f2f2;
  background-color: white;
}
.van-search__content {
  background-color: white;
}
// .my-swipe .van-swipe-item {
//     color: #fff;
//     font-size: 20px;
//     line-height: 150px;
//     text-align: center;
//     background-color: #39a9ed;
// }

.list {
  margin: 10px;
}

.card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  img {
    // width: 100%;
    height: 150px;
    border-radius: 7px;
  }
  > div {
    width: 150px;
    // border: 1px solid gray;
    border-radius: 10px;
    box-shadow: 1px 1px 10px 5px rgba(0, 0, 0, 0.08);
    margin: 5px;
    padding: 4px;
    background-color: white;
    h3 {
      margin: 5px;
    }
    p {
      margin: 5px 15px 5px;
      color: gray;
      font-size: 14px;
    }
  }
}
.search {
  display: flex;
  align-items: center;
  justify-content: center;
  input {
    width: 100%;
    margin: 8px 0;
    padding: 5px;
    border: 0;
    border-radius: 40px;
    text-align: center;
  }
}

::v-deep .mint-header-title{
  font-size: 15px;
}
</style>